/* ===================================================================== */
/* styles.css (save as a separate file named: styles.css)                 */
/* I assumed the color #78873 you provided was missing one digit.       */
/* I used #788773 as a close six-digit replacement. If you prefer a     */
/* different exact hex, replace the --text-color variable below.        */
/* ===================================================================== */

:root{
  --bg: #d2dcb6;        /* background color (from your request) */
  --text-color: #778873; /* corrected 6-digit hex for the color you gave */
  --max-width: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-color);
  font-family: 'TASA Explorer', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.center{
  min-height:100vh; /* full viewport height */
  display:flex;
  align-items:center; /* vertical center */
  justify-content:center; /* horizontal center */
  text-align:center;
  padding:2rem;
}

.title{
  margin:0 0 0.5rem 0;
  line-height:1.05;
  /* responsive size: large on desktop, smaller on phone */
  font-weight:600;
  font-size:clamp(1.6rem, 4.5vw + 0.5rem, 3.2rem);
}

.sub{
  margin:0;
  font-weight:400;
  font-size:clamp(1.1rem, 3.2vw + 0.3rem, 2.2rem);
  opacity:0.95;
}

/* small accessibility tweak: ensure sufficient contrast for users */
@media (prefers-contrast: more){
  .title,.sub{filter:brightness(0.9)}
}

/* make sure it looks good on very narrow devices */
@media (max-width:360px){
  .title{letter-spacing: -0.2px}
}

/* End of styles.css */